<!--  -->
<template>
  <div class="box">
    <div class="banners">
      <div class="allnum">已为您找到 <i>364</i> 家符合条件的企业</div>
      <div class="chao">
        <ul class="avent">
          <li>
            <i class="el-icon-star-on"></i>
            收藏
          </li>
          <li>
            <i class="el-icon-download"></i>
            下载列表
          </li>
          <li>
            <i class="el-icon-sort"></i>
            智能排序
          </li>
        </ul>
      </div>
    </div>
    <div class="conse">
      <div class="parts" v-for="part in alls" :key="part.index">
        <div class="inmags">
          <img :src="part.sr" alt="" class="mgs" />
        </div>
        <div class="ifromation">
          <ul class="mations">
            <li>
              <h3>{{ part.qi }}</h3>
              <el-tag size="small">{{ part.zuang }}</el-tag>
            </li>
            <li>
              <el-tag type="success" class="shows">{{ part.zuango }}</el-tag>

              <el-tag type="info" class="shows">{{ part.zuangts }}</el-tag>
              <el-tag type="danger" class="shows">{{ part.zuangt }}</el-tag>
              <el-tag type="warning" class="shows">{{ part.zuangth }}</el-tag>
              <el-tag type="warning" class="shows">{{ part.zuangf }}</el-tag>
              <el-tag type="danger" class="shows">{{ part.zuangfie }}</el-tag>
              <el-tag type="danger" class="shows">{{ part.zuang }}</el-tag>
            </li>
            <li>
              {{ part.name }}
            </li>
            <li>
              {{ part.pthone }}
            </li>
            <li>{{ part.aderss }}</li>
            <li>{{ part.ping }}</li>
          </ul>
        </div>
        <div class="wedo">
          <el-button type="text" class="wedoit"> 加入监控</el-button>
          <el-button type="text" class="wedoit"> 加入名单</el-button>
        </div>
      </div>
    </div>
    <div class="pags">
      <div class="slects">
        <el-checkbox label="复选框 B" class="alls">全部</el-checkbox>
        <span>已选0条</span>
        <el-button type="text" class="does"> 导出信息</el-button>
      </div>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
         currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
      alls: [
        {
          sr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          qi: '湖北陶瓷长江产业基金合伙企业（有限合伙）',
          zuang: '存续',
          zuango: '高新企业',
          zuangts: '上市企业',
          zuangt: '瞪羚企业',
          zuangth: '500强',
          zuangf: '被执行人',
          zuangfie: '被执行人',
          name: '  法定代表人：湖北小米长江产业投资基金管理有限公司 | 注册资本：120000000万元人民币 | 成立日期：2020-12-12',
          pthone:
            '  电话：0551-6677890 更多（3） | 网站：www.baibainin.com | 邮箱：hhhuuu@uioo.com 复制 更多（3）',
          aderss: '地址：佛山市禅城区石湾镇跃进路2号陶瓷园B座七层',
          ping: '招聘：陶瓷产品销售',
        },
        {
          sr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          qi: '湖北陶瓷长江产业基金合伙企业（有限合伙）',
          zuang: '存续',
          zuango: '高新企业',
          zuangts: '上市企业',
          zuangt: '瞪羚企业',
          zuangth: '500强',
          zuangf: '被执行人',
          zuangfie: '被执行人',
          name: '  法定代表人：湖北小米长江产业投资基金管理有限公司 | 注册资本：120000000万元人民币 | 成立日期：2020-12-12',
          pthone:
            '  电话：0551-6677890 更多（3） | 网站：www.baibainin.com | 邮箱：hhhuuu@uioo.com 复制 更多（3）',
          aderss: '地址：佛山市禅城区石湾镇跃进路2号陶瓷园B座七层',
          ping: '招聘：陶瓷产品销售',
        },
        {
          sr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          qi: '湖北陶瓷长江产业基金合伙企业（有限合伙）',
          zuang: '存续',
          zuango: '高新企业',
          zuangts: '上市企业',
          zuangt: '瞪羚企业',
          zuangth: '500强',
          zuangf: '被执行人',
          zuangfie: '被执行人',
          name: '  法定代表人：湖北小米长江产业投资基金管理有限公司 | 注册资本：120000000万元人民币 | 成立日期：2020-12-12',
          pthone:
            '  电话：0551-6677890 更多（3） | 网站：www.baibainin.com | 邮箱：hhhuuu@uioo.com 复制 更多（3）',
          aderss: '地址：佛山市禅城区石湾镇跃进路2号陶瓷园B座七层',
          ping: '招聘：陶瓷产品销售',
        },
        {
          sr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          qi: '湖北陶瓷长江产业基金合伙企业（有限合伙）',
          zuang: '存续',
          zuango: '高新企业',
          zuangts: '上市企业',
          zuangt: '瞪羚企业',
          zuangth: '500强',
          zuangf: '被执行人',
          zuangfie: '被执行人',
          name: '  法定代表人：湖北小米长江产业投资基金管理有限公司 | 注册资本：120000000万元人民币 | 成立日期：2020-12-12',
          pthone:
            '  电话：0551-6677890 更多（3） | 网站：www.baibainin.com | 邮箱：hhhuuu@uioo.com 复制 更多（3）',
          aderss: '地址：佛山市禅城区石湾镇跃进路2号陶瓷园B座七层',
          ping: '招聘：陶瓷产品销售',
        },
        {
          sr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          qi: '湖北陶瓷长江产业基金合伙企业（有限合伙）',
          zuang: '存续',
          zuango: '高新企业',
          zuangts: '上市企业',
          zuangt: '瞪羚企业',
          zuangth: '500强',
          zuangf: '被执行人',
          zuangfie: '被执行人',
          name: '  法定代表人：湖北小米长江产业投资基金管理有限公司 | 注册资本：120000000万元人民币 | 成立日期：2020-12-12',
          pthone:
            '  电话：0551-6677890 更多（3） | 网站：www.baibainin.com | 邮箱：hhhuuu@uioo.com 复制 更多（3）',
          aderss: '地址：佛山市禅城区石湾镇跃进路2号陶瓷园B座七层',
          ping: '招聘：陶瓷产品销售',
        },
        {
          sr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          qi: '湖北陶瓷长江产业基金合伙企业（有限合伙）',
          zuang: '存续',
          zuango: '高新企业',
          zuangts: '上市企业',
          zuangt: '瞪羚企业',
          zuangth: '500强',
          zuangf: '被执行人',
          zuangfie: '被执行人',
          name: '  法定代表人：湖北小米长江产业投资基金管理有限公司 | 注册资本：120000000万元人民币 | 成立日期：2020-12-12',
          pthone:
            '  电话：0551-6677890 更多（3） | 网站：www.baibainin.com | 邮箱：hhhuuu@uioo.com 复制 更多（3）',
          aderss: '地址：佛山市禅城区石湾镇跃进路2号陶瓷园B座七层',
          ping: '招聘：陶瓷产品销售',
        },
      ],
    }
  },
  created() {},
  methods: {
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.flex-1 {
  background: #f0f2f5;
}
.box {
  .banners {
    width: 98%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 17px;
    .allnum {
      width: 50%;
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #444451;
      line-height: 20px;
      i {
        color: rgb(245, 117, 117);
      }
    }
    .chao {
      width: 50%;
      height: 60px;
      .avent {
        display: flex;
        align-items: center;
        height: 60px;
        justify-content: end;
        li {
          height: 16px;
          width: auto;
          margin-right: 32px;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #3d3d3d;
          line-height: 14px;
          i {
            display: block;
            width: 14px;
            height: 14px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .conse {
    width: 98%;
    margin: 0 34px 0 17px;
    height: 747px;
    overflow-y: auto;
    position: relative;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: rgba(50, 50, 50, 0.25);
      border: 2px solid transparent;
      border-radius: 10px;
      background-clip: padding-box;
    }

    &::-webkit-scrollbar-track {
      background-color: rgba(50, 50, 50, 0.05);
    }
    .parts {
      width: 100%;
      height: auto;
      border-top: 1px solid #b4b4b4;
      display: flex;
      justify-content: center;
      .inmags {
        width: 60px;
        height: 60px;
        margin-top: 16px;
        margin-right: 16px;
        .mgs {
          display: block;
          width: 60px;
          height: 60px;
        }
      }
      .ifromation {
        margin-top: 16px;
        width: 741px;
        height: 240px;

        margin-right: 200px;
        .mations {
          width: 100%;
          height: 240px;
          li {
            display: flex;
            margin-bottom: 10px;
            h3 {
              font-size: 18px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #444451;
              line-height: 25px;
            }
            .shows {
              widows: 60;
              height: 24px;
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;

              line-height: 24px;
              margin-right: 10px;
            }
          }
        }
      }
      .wedo {
        margin-top: 68px;
        margin-right: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
       flex: 1;
        height: 61px;
       
        .wedoit {
          width: 61px;
          height: 61px;
        }
      }
    }
  }
  .pags {
    width: 100%;
    height: 87px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    .slects {
      display: flex;
      align-items: center;
      margin-left: 38px;
      span {
        margin: 0 20px;
        display: block;
        width: 120px;
        height: 22px;
        line-height: 22px;
      }
    }
    .pagination {
      margin-right: 35px;
    }
  }
}
</style>
